<template>
	<view class="login-container">
		<!-- 提示登录的图标 -->
		<uni-icons type="contact-filled" size="100" color="#AFAFAF"></uni-icons>

		<!-- 登录按钮 -->
		<button type="primary" @click="btnLogin" class="btn-login">一键登录</button>

		<!-- 登录提示 -->
		<view class="tips-text">登录后尽享更多权益</view>
	</view>
</template>

<script>
	export default {
		methods: {
			// 一键登录 -> 获得token
			async btnLogin() {
				// code -> 登录凭证
				const {
					code,
					errMsg
				} = await uni.login()
				if (errMsg !== 'login:ok') return this.$msg('用户登录凭证获取失败!')
				// 用户信息密文, iv, 数据加密字符串(昵称,,,), 签名
				const {
					rawData,
					signature,
					encryptedData,
					iv,
					errMsg: errMsgLogin,
					userInfo
				} = await uni.getUserInfo()
				if (errMsgLogin !== 'getUserInfo:ok') return this.$msg('用户信息获取失败!')
				// 存储用户信息 
				this.$store.commit('user/updateUserInfo', userInfo)
				// 获取用户token
				this.getUserToken({
					rawData,
					signature,
					encryptedData,
					iv,
					code
				})
			},
			async getUserToken(userData) {
				console.log(userData);
				const {
					meta: {
						status
					},
					message: {
						token
					}
				} = await this.$http.post('/users/wxlogin', userData)
				if (status !== 200) return this.$msg('获取token失败')
				console.log('用户的token信息', token);
				this.$store.commit("user/updateToken", token);
				const redirectInfo = this.$store.state.user.redirectInfo
				if (redirectInfo) {
					// 从购物车页面过来的, 需要跳转回去
					if (redirectInfo.type === 'tab') {
						// type为tab, 调用switchTab
						uni.switchTab({
							url: redirectInfo.url,
						})
					} else {
						uni.navigateTo({
							url: redirectInfo.url,
						})
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login-container {
		// 登录盒子的样式
		height: 750rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #f8f8f8;
		position: relative;
		overflow: hidden;

		// 绘制登录盒子底部的半椭圆造型
		&::after {
			content: ' ';
			display: block;
			position: absolute;
			width: 100%;
			height: 80rpx;
			left: 0;
			bottom: 0;
			background-color: white;
			border-radius: 100%;
			transform: translateY(50%);
		}

		// 登录按钮的样式
		.btn-login {
			width: 90%;
			border-radius: 200rpx;
			margin: 30rpx 0;
			background-color: #c00000;
		}

		// 按钮下方提示消息的样式
		.tips-text {
			font-size: 24rpx;
			color: gray;
		}
	}
</style>